{{define "/user/register.shtml"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=width-device, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>IM</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/mui/3.7.1/css/mui.min.css">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/mui/3.7.1/js/mui.min.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">注册</h1>
</header>
<div class="mui-content" id="pageapp">
    <form id="login-form" class="mui-input">
        <div class="mui-input-row">
            <label>账号</label>
            <input v-model="user.mobile" placeholder="请输入手机号" type="text" class="mui-input-clear mui-input"/>
        </div>
        <div class="mui-input-row">
            <label>密码</label>
            <input v-model="user.passwd" placeholder="请输入密码" type="password" class="mui-input-clear mui-input"/>
        </div>
    </form>
    <div class="mui-content-padded">
        <button @click="register" type="button" class="mui-btn mui-btn-block mui-btn-primary">注册</button>
    </div>
    <div class="mui-content-padded oauth-area"></div>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el: "#pageapp",
        data: function () {
            return {
                user: {
                    mobile: "",
                    passwd: ""
                }
            }
        },
        methods: {
            register: function () {
                console.log("register")

                axios({
                    method: 'post',
                    url: '/user/register',
                    params: this.user
                }).then(resp => {
                    if (res.data.code != 0) {
                        mui.toast(res.data.msg)
                    } else {
                        mui.toast("注册成功!")
                    }
                }).catch(e => {
                    console.log(e.message);
                })
            }
        }
    });

</script>
{{end}}